<template>
  <div class="login-container">
    <div class="login-content">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
      >
        <div class="user">
          <el-form-item prop="userName">
            <el-input v-model="ruleForm.userName" type="text" autocomplete="off" size="large"
                      placeholder="请输入账号"/>
          </el-form-item>
          <div class="user-icon">
            <i class="iconfont icon-xingming"></i>
          </div>
        </div>

        <div class="password">
          <el-form-item prop="passWord">
            <el-input
                v-model="ruleForm.passWord"
                type="password"
                autocomplete="off"
                size="large"
                placeholder="请输入密码"
            >
            </el-input>
            <div class="password-icon">
              <i class="iconfont icon-mima"></i>
            </div>
            <div class="password-eye">

            </div>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%;" size="large">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {ElMessage, type FormInstance, type FormRules} from 'element-plus'
import {useRouter} from 'vue-router'
import {setUserInfo} from '@/utils/storage'
// 表单数据
const ruleForm = reactive({
  userName: '',
  passWord: '',
})

// 表单验证
const ruleFormRef = ref<FormInstance>()

// 账号验证
const validateUserName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('账号不能为空！'))
    return
  }
  if (value.length < 2) {
    callback(new Error('账号长度不能小于2位！'))
    return
  }
  callback()
}

// 密码验证
const validatePassWord = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空！'))
    return
  }
  if (value.length < 3) {
    callback(new Error('密码长度不能小于3位！'))
    return
  }
  callback()
}

// 表单验证规则
const rules = reactive<FormRules<typeof ruleForm>>({
  userName: [{validator: validateUserName, trigger: 'blur'}],
  passWord: [{validator: validatePassWord, trigger: 'blur'}],
})

//路由跳转
const router = useRouter()
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (ruleForm.userName === 'admin' && ruleForm.passWord === 'admin') {
        ElMessage.success('登录成功！')
        const userA = {
          id: '1',
          name: 'john',
          adminId: '1',
          userName: 'admin',
          password: 'admin',
          authorImage: 'https://img2.baidu.com/it/u=922002843,3116261735&fm=253&fmt=auto&app=120&f=JPEG?w=514&h=500'
        }
        router.push('/')
        setUserInfo(userA)
      } else if (ruleForm.userName === 'nh' && ruleForm.passWord === 'nh123') {
        ElMessage.success('登录成功！')
        const userB = {
          id: '2',
          name: 'nh',
          adminId: '0',
          userName: 'nh',
          password: 'nh123',
          authorImage: 'https://img1.baidu.com/it/u=95075525,3066424051&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
        }
        setUserInfo(userB)
        router.push('/')
      }
    } else {
      ElMessage.error('账号或密码错误！！')
    }
  })
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-content {
  width: 400px;
}

.user, .password {
  width: 100%;
  position: relative;
}

.user-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
  color: #c0c4cc;
}

.password-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  margin-top: -15px;
  color: #c0c4cc;
}

::v-deep .el-input__wrapper {
  padding-left: 30px;
}

</style>
